import Vue from 'vue'
import Router from 'vue-router'
// 登录页
import login from '@/pages/login'
// 首页
import main from '@/pages/main'
// 仪表盘
import dashboard from '@/pages/dashboard'
// 第一个路由
import first from '@/pages/router/1-first'
// 获取到路由name的值
import name from '@/pages/router/2-name'
// 地址栏传递参数
import params from '@/pages/router/3-params'
// 地址栏传递参数（加入正则）
import params2 from '@/pages/router/4-params'
// N个参数 地址栏上看不到参数
import paramsMultiple from '@/pages/router/5-paramsMultiple'
// N个参数 地址栏上带参数
import paramsMultiple2 from '@/pages/router/6-paramsMultiple'
// 404错误（要放到所有路由的后面）
import error from '@/pages/router/7-error'
// 动态设置路由
import forward from '@/pages/router/8-forward'
// 进入路由
import beforeEnter from '@/pages/router/9-beforeEnter'
// 进入路由、离开路由
import beforeEnter2 from '@/pages/router/10-beforeEnter'
// tag
import tag from '@/pages/router/16-tag'
// 中高级路由模块
import routerDemo from '@/router/routerDemo.router'

Vue.use(Router)

/**
 * 滚动行为
 * @param to 要进入的目标路由对象，到哪里去
 * @param from 离开的路由对象，哪里来
 * @param savedPosition 会记录滚动条的坐标，点击前进/后退的时候记录值{x:?,y:?}
 * @returns {*}
 */
const scrollBehavior = function (to, from, savedPosition) {
  if (to.hash) {
    return {selector: to.hash}
  }
}

const router = new Router({
  // 去掉地址栏上的#号
  // mode: 'history',
  // 选中时通过添加类名添加样式
  linkActiveClass: 'router-active',
  scrollBehavior,
  routes: [
    // 登录页
    {
      path: '/',
      component: login
    },
    // scroll
    {
      path: '/scroll',
      component: () => import('@/pages/router/17-scroll')
    },
    // 主内容
    {
      path: '/main',
      component: main,
      // 子路由嵌套
      children: [
        // 仪表盘
        // 切记这里的路由路径没有/
        {
          path: 'dashboard',
          component: dashboard
        },
        // 第一个路由
        {
          path: 'first',
          // 别名使用
          alias: 'firstAlias',
          component: first
        },
        // 获取到路由name的值
        {
          path: 'name',
          name: 'qishon',
          component: name
        },
        // 地址栏传递参数
        {
          path: 'params/:id/:name',
          component: params
        },
        // 地址栏传递参数（加入正则）
        {
          path: 'params2/:id(\\d+)/:name',
          component: params2
        },
        // N个参数 地址栏上看不到参数
        {
          path: 'paramsMultiple',
          name: 'paramsMultiple',
          component: paramsMultiple
        },
        // N个参数 地址栏上带参数
        {
          path: 'paramsMultiple2',
          name: 'paramsMultiple2',
          component: paramsMultiple2
        },
        // 重定向
        {
          path: 'redirect/:id(\\d+)/:name',
          redirect: '/main/params2/:id(\\d+)/:name'
        },
        // 动态设置路由
        {
          path: 'forward',
          component: forward
        },
        // 进入路由
        {
          path: 'beforeEnter',
          component: beforeEnter,
          /**
           * 路由的钩子函数：
           *  进入此路由配置时（一般不会写到这里，因为只能监听到进入时的事件，离开时没办法监听到）
           * @param to 要到哪里去
           * @param from 上一个页面
           * @param next
           */
          beforeEnter: (to, from, next) => {
            console.log(to)
            console.log(from)
            // 跳转页面
            next()
          }
        },
        // 进入路由、离开路由
        {
          path: 'beforeEnter2',
          component: beforeEnter2
        },
        // tag
        {
          path: 'tag',
          component: tag
        },
        // a标签跳转
        {
          path: 'a/:id/:name',
          component: () => import('@/pages/router/18-a')
        },
        // a标签跳转
        {
          path: 'a2',
          name: 'a2',
          component: () => import('@/pages/router/19-a')
        },
        // 路由拆分
        ...routerDemo,
        // 404错误（要放到所有路由的后面）
        {
          path: '*',
          component: error
        }
      ]
    }
  ]
})
export default router

/**
 * 全局守卫
 *  to: 即将要进入的目标 路由对象
 *  from: 当前导航正要离开的路由
 *  next(): 进行管道中的下一个钩子
 */
router.beforeEach((to, form, next) => {
  // 路由变化修改title
  let routerTitle = to.meta.title || '路由demo演示'
  window.document.title = routerTitle
  next()
})
